<template>
	<view class="game-navigation">
		<view class="fixed-content">
			<!-- 状态栏高度 -->
			<view class="eStatusBarClass" :style="{'height': geStatusBarHeight() + 'px'}"></view>
			<!-- 导航栏高度 -->
			<view class="bar-content" :style="{'height': getNavBarHeight()+'px'}">
				<slot>
					<view @click='_handleGameBack' class='game-back-button' style="margin-left: 15px;">返回</view>
					<view style="margin: 10px 0rpx; width: 130px;">
						<image id="countDownImage" :animation="animationData" class='countDown-img'
							src='../../static/image/fjh/countdown.png' mode="scaleToFill"></image>
						<view class='countDown-num'>{{countDownTime}}</view>
					</view>
					<view @click='_handleGameNext' class='game-back-button' style="margin-right: 15px;">跳过</view>
				</slot>
			</view>
		</view>
		<!-- 占位高度，状态栏高度+导航栏高度，父组件就不需要计算导航栏高度 -->
		<view :style="{'height': geStatusBarHeight() + getNavBarHeight() + 'px'}"></view>
		<selectContentView v-if="showReportPromptbox" :msg="ReportPromptMsg" confirmTitle="是" cancelTitle="否"
			@confirm="gameNext" @cancel="hidePromptbox"></selectContentView>
	</view>
</template>

<script>
	import selectContentView from '../../components/selectContentView.vue'
	export default {
		props: {
			countDownTime: {
				type: String,
				default: '00:60'
			},
			countDown: {
				type: Number,
			}
		},
		watch: {
			countDown(newVal, oldVal) {
				this._initDowntime(newVal, oldVal);
			}
		},
		data() {
			return {
				ReportPromptMsg: '跳过本题后,本题将被计入生词本,是否确定跳过。',
				showReportPromptbox: false,
				animationData: {},
				animation: null
			};
		},
		methods: {
			// 获取状态栏高度
			geStatusBarHeight() {
				return uni.getSystemInfoSync()['statusBarHeight']
			},
			// 获取导航栏高度
			getNavBarHeight() {
				// #ifdef MP-WEIXIN
				let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				let navbarHeight = menuButtonInfo.height + (menuButtonInfo.top - uni.getSystemInfoSync()[
					'statusBarHeight']) * 2 + 2
				// #endif
				// #ifdef APP-PLUS || H5
				let navbarHeight = 44
				// #endif
				return navbarHeight + 20
			},
			_handleGameBack: function() {
				this.$emit('gameBack');
			},
			_handleGameNext: function() {
				this.showReportPromptbox = true;
			},
			gameNext: function() {
				this.hidePromptbox();
				this.$emit('gameNext');
			},
			hidePromptbox: function() {
				this.showReportPromptbox = false;
			},
			_initDowntime(newVal, oldVal) {
				if (newVal == 30) {
					this.animation = uni.createAnimation({
						duration: 100, // 动画持续时间，单位ms  
						timingFunction: 'ease', // 定义动画的效果  
					});
					// 定义抖动动画的关键帧  
					this.animation.translateX(3).step(); // 向右移动10px  
					this.animation.translateX(-3).step(); // 向左移动10px  
					this.animation.translateX(3).step(); // 向右移动10px  
					this.animation.translateX(-3).step(); // 向左移动10px  
					this.animation.translateX(3).step(); // 向右移动10px  
					this.animation.translateX(-3).step(); // 向左移动10px 
					this.animation.translateX(0).step(); // 回到原位  
					// 将动画数据导出供WXML使用  
					this.animationData = this.animation.export()
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.game-back {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100%;
		padding: 20px 0 20px;
	}

	.shake-clock {
		/* animation-name: shake;
 	animation-duration: 1.5s; */

		/* 设置动态抖动动画 */
		animation: shake2 0.82s cubic-bezier(.36, .07, .19, .97) both;
		transform-origin: center;
	}

	.game-navigation {
		.fixed-content {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 1000;
			.eStatusBarClass{
				background: #130e00;
			}
			.bar-content {
				background: var(--navBackColor);
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
			}

			// width: 100%;
			// height: 100%;

		}

	}

	.game-back {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 120px;
		height: 100%;
		padding-top: 15px;
	}

	.game-back-button {
		width: 100px;
		height: 30px;
		font-size: 16px;
		font-family: 'hzgb';
		color: #000;
		background: #fff;
		border-radius: 15px;
		line-height: 30px;
	}

	.countDown-img,
	.score-img {
		margin-top: 4px;
		width: 29px;
		height: 29px;
	}

	.countDown-title,
	.score-title {
		font-size: 11px;
	}

	.countDown-num,
	.score-num {
		font-size: 15px;
		color: var(--themThesaurusBackColor);
		font-family: 'hzgb';
	}

	.countDown-img,
	.score-img {
		margin-top: 4px;
		width: 29px;
		height: 29px;
	}

	.countDown-title,
	.score-title {
		font-size: 11px;
	}

	.countDown-num,
	.score-num {
		font-size: 15px;
	}

	.quiverClass {
		animation: doudong 1s 0s infinite
	}

	/*定义关键帧动画*/
	@keyframes doudong {
		0% {
			transform: rotate(0deg)
		}

		10%,
		20%,
		30% {
			transform: rotate(-3deg)
		}

		15%,
		25%,
		35% {
			transform: rotate(3deg)
		}

		40% {
			transform: rotate(-2deg)
		}

		45% {
			transform: rotate(2deg)
		}

		50% {
			transform: rotate(0deg)
		}

		100% {
			transform: rotate(0deg)
		}
	}
</style>